<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>统计面板</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"
          integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
          integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
            integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js"
            integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
            crossorigin="anonymous"></script>
    <script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>
    <script>
        /**
         * 表格导出
         * style="mso-number-format:'@';"
         * 1） 文本：'@'
         * 2） 日期：'yyyy/mm/dd'
         * 3） 数字：'#,##0.00'
         * 4） 货币：'￥#,##0.00'
         * 5） 百分比：'#0.00%'
         */
        function exportFile() {
            //获取表格
            var exportFileContent = document.getElementById("showTable").outerHTML;

            //设置格式为Excel，表格内容通过btoa转化为base64，此方法只在文件较小时使用(小于1M)
            //exportFileContent = window.btoa(unescape(encodeURIComponent(exportFileContent)));
            //var link = "data:"+MIMEType+";base64," + exportFileContent;

            //使用Blob
            var blob = new Blob([exportFileContent], {type: "text/plain;charset=utf-8"});
            //解决中文乱码问题
            blob = new Blob([String.fromCharCode(0xFEFF), blob], {type: blob.type});
            //设置链接
            var link = window.URL.createObjectURL(blob);

            var a = document.createElement("a");    //创建a标签
            a.download = "数据展示.xls";                //设置被下载的超链接目标（文件名）
            a.href = link;                            //设置a标签的链接
            document.body.appendChild(a);            //a标签添加到页面
            a.click();                                //设置a标签触发单击事件
            document.body.removeChild(a);            //移除a标签
        }
    </script>
    <script>
        var get = false;

        function getfile() {
            if (get == true) {
                $("#export_btn").text("正在导出，请稍后");
                $("#new").modal("show")
                $("#export_btn").disabled = true;
                $('#list').submit();
            }

        }
    </script>
    <style>
        body {
            background-color: #f7f7f7;
        }

        .footer {
        {#position: fixed;#} bottom: 0;
            display: flex;
            flex-direction: column;
            width: 100%;
        {#vertical-align: center;#}

        }

        .footer-p {
            display: flex;
            flex-direction: column;
            font-size: 12px;
            color: #5a6268;
            justify-items: center;
            align-items: center;
        }

        .btn-group {
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div class="container">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">青岛大学 每日疫情上报</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="../../index/">表单</a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="#">统计 <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="../../index/">退出</a>
                </li>
            </ul>
        </div>
    </nav>
    <div class="modal fade" id="new">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">提示</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    正在导出，请勿离开当前页面！
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" onclick="$(location).prop('href', '../form1/')">
                        我知道了
                    </button>
                </div>
            </div>
        </div>
    </div>
    {% if class_list %}
        <table class="table table-striped" data-toggle="table" data-sort-name="userfield" id="showTable" hidden>
            <thead>
            <tr>
                <th scope="col">名称</th>
                <th scope="col" data-sortable="true" data-field="userfield" data-search='true'>类别</th>
                <th scope="col" data-sortable="true" data-field="total">总人数</th>
                <th scope="col" data-sortable="true" data-field="submited">今日已提交人数</th>
                <th scope="col" data-sortable="true" data-field="unsubmited">今日未提交人数</th>
                <th scope="col" data-sortable="true" data-field="is_passed">今日到过武汉的人数</th>
                <th scope="col" data-sortable="true" data-field="is_faver">今日发烧人数</th>
                <th scope="col" data-sortable="true" data-field="is_deacted">今日确诊人数</th>
            </tr>
            </thead>
            <tbody>

            {% for o in class_list %}
                <tr>

                    {#                        <td>{{ o.classid }}</td>#}

                    <td>{{ o.name }}</td>
                    {% if o.usertype == 5 %}
                        <td>本科生</td>
                    {% elif o.usertype == 0 %}
                        <td>本科生</td>
                    {% elif o.usertype == 1 %}
                        <td>研究生</td>
                    {% elif o.usertype == 2 %}
                        <td>教职工</td>
                    {% endif %}
                    <td>{{ o.total }}</td>
                    <td>{{ o.submited }}</td>
                    <td>{{ o.unsubmited }}</td>
                    <td>{{ o.is_passed }}</td>
                    <td>{{ o.is_faver }}</td>
                    <td>{{ o.is_deacted }}</td>
                </tr>
            {% endfor %}

            </tbody>
        </table>
        <form id="list" method="post" action="../../anysis/export/">
            {% csrf_token %}
            <table class="table table-striped" data-toggle="table" data-sort-name="userfield">
                <thead>
                <tr>
                    <th scope="col"></th>
                    <th scope="col">名称</th>
                    <th scope="col" data-sortable="true" data-field="userfield" data-search='true'>类别</th>
                    <th scope="col" data-sortable="true" data-field="total">总人数</th>
                    <th scope="col" data-sortable="true" data-field="submited">今日已提交人数</th>
                    <th scope="col" data-sortable="true" data-field="unsubmited">今日未提交人数</th>
                    <th scope="col" data-sortable="true" data-field="is_passed">今日到过疫区的人数</th>
                    <th scope="col" data-sortable="true" data-field="is_faver">今日发烧人数</th>
                    <th scope="col" data-sortable="true" data-field="is_deacted">今日确诊人数</th>
                    <th scope="col" data-sortable="true" data-field="is_unsearch">今日未就诊人数</th>
                    <th scope="col" data-sortable="true" data-field="isinschool">今日在校人数</th>
                    <th scope="col" data-sortable="true" data-field="is_go_to_outer">今日外出人数</th>
                    <th scope="col" data-sortable="true" data-field="isplanedtravel">今日计划返校人数</th>
                    <th scope="col" data-sortable="true" data-field="is_atach_patient">今日直接亲属接触确诊病患人数</th>
                    <th scope="col" data-sortable="true" data-field="is_deacted">今日接触确诊病患人数</th>
                    <th scope="col">操作</th>
                </tr>
                </thead>
                <tbody>

                {% for o in class_list %}
                    <tr>
                        {% ifnotequal o.usertype 5 %}
                            <td><input class="form-control" type="checkbox" name="items"
                                       value="{{ o.classid }}+{{ o.usertype }}" onclick="get=true"></td>
                        {% else %}
                            <td></td>
                        {% endifnotequal %}
                        {#                        <td>{{ o.classid }}</td>#}

                        <td>{{ o.name }}</td>
                        {% if o.usertype == 5 %}
                            <td>本科生</td>
                        {% elif o.usertype == 0 %}
                            <td>本科生</td>
                        {% elif o.usertype == 1 %}
                            <td>研究生</td>
                        {% elif o.usertype == 2 %}
                            <td>教职工</td>
                        {% endif %}
                        <td>{{ o.total }}</td>
                        <td>{{ o.submited }}</td>
                        <td>{{ o.unsubmited }}</td>
                        <td>{{ o.is_passed }}</td>
                        <td>{{ o.is_faver }}</td>
                        <td>{{ o.is_deacted }}</td>
                        <td>{{ o.is_unsearch }}</td>
                        <td>{{ o.isinschool }}</td>
                        <td>{{ o.is_go_to_outer }}</td>
                        <td>{{ o.isplanedtravel }}</td>
                        <td>{{ o.is_attatch_patient }}</td>
                        <td>{{ o.folk_attach }}</td>
                        <td>
                            <button class="btn btn-info" type="button"
                                    onclick="window.location.href='../../anysis/show_detail/?usertype={{ o.usertype }}&depid={{ o.classid }}'">
                                详细
                            </button>
                        </td>
                    </tr>
                {% endfor %}

                </tbody>
            </table>
            <div class="btn-group">
                <button type="button" class="btn btn-info" onclick="exportFile()">下载本表</button>
                <button type="button" class="btn btn-primary" id="export_btn" onclick="getfile()">导出详细信息</button>
            </div>
        </form>



    {% elif user_list %}
        <table class="table table-striped" data-toggle="table" id="showTable">
            <thead>
            <tr>
                <th scope="col">学（工）号</th>
                <th scope="col">姓名</th>
                <th scope="col" data-sortable="true" data-field="state">是否已提交</th>
                <th scope="col" data-sortable="true" data-field="phonenumber">联系电话</th>
                <th scope="col" data-sortable="true" data-field="isinschool">目前是否在校</th>
                <th scope="col" data-sortable="true" data-field="residence">现居住地</th>
                <th scope="col" data-sortable="true" data-field="location">目前所在地区</th>
                <th scope="col" data-sortable="true" data-field="is_atach_patient">是否接触确诊病患</th>
                <th scope="col" data-sortable="true" data-field="folk_attach">是否有直系亲属确诊</th>
                <th scope="col" data-sortable="true" data-field="ispassed">是否到疫区</th>
                <th scope="col" data-sortable="true" data-field="planedtravel_time">到达日期</th>
                <th scope="col" data-sortable="true" data-field="planedleave_time">（预计）离开日期</th>
                <th scope="col" data-sortable="true" data-field="isfever">是否有发热、乏力、咳嗽、呼吸困难等症状</th>
                <th scope="col" data-sortable="true" data-field="isseen">就诊情况</th>
                <th scope="col" data-sortable="true" data-field="isisolated">隔离情况</th>
                <th scope="col" data-sortable="true" data-field="hospital">就诊医院</th>
                <th scope="col" data-sortable="true" data-field="is_go_outer">是否计划外出</th>
                <th scope="col" data-sortable="true" data-field="isplanedtravel">是否有返校计划</th>
                <th scope="col" data-sortable="true" data-field="trans_type">返校计划搭乘的交通工具</th>
                <th scope="col" data-sortable="true" data-field="plan_back_time">返校计划时间</th>

            </tr>
            </thead>
            <tbody>
            {% for o in user_list %}
                <tr>
                    <td>{{ o.userid }}</td>
                    <td>{{ o.realname }}</td>
                    <td><b>{{ o.state }}</b></td>
                    <td>{{ o.phonenumber }}</td>
                    <td>{{ o.isinschool }}</td>
                    <td>{{ o.residence }}</td>
                    <td>{{ o.location }}</td>
                    <td>{{ o.is_atach_patient }}</td>
                    <td>{{ o.folk_attach }}</td>
                    <td>{{ o.ispassed }}</td>
                    <td>{{ o.planedtravel_time }}</td>
                    <td>{{ o.planedleave_time }}</td>
                    <td>{{ o.isfever }}</td>
                    <td>{{ o.isseen }}</td>
                    <td>{{ o.isisolated }}</td>
                    <td>{{ o.hospital }}</td>
                    <td>{{ o.is_go_to_outer }}</td>
                    <td>{{ o.isplanedtravel }}</td>
                    <td>{{ o.trans_type }}</td>
                    <td>{{ o.plan_back_time }}</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
        <div class="btn-group">
            <button type="button" class="btn btn-info" onclick="exportFile()">下载本表</button>
        </div>
    {% else %}
        <div class="alert alert-warning" role="alert">
            您尚无权限，如需开通，请与智慧校园与信息化建设中心联系！
        </div>
    {% endif %}
</div>

<footer class="footer">
    <div class="footer-p">
        <p>青岛大学 版权所有 ©2020</p>
        <p>电子邮件：<a href="mailto:ecampus@qdu.edu.cn">ecampus@qdu.edu.cn</a></p>
        <p>青岛大学 智慧校园服务创新协会 提供技术支持</p>

    </div>
</footer>

<script>
    $("#all").click(function () {
        if (this.checked) {
            $("checkbox").prop("checked", true);
        } else {
            $("checkbox").prop("checked", false);
        }
    });
</script>
</body>
</html>